<template>
  <div class="live-page">
    <div class="title">
      <span>监控录像</span>
    </div>
    <div class="live-item">
      <div class="fix-flex">
        <div class="live-box" v-for="(item,index) in liveList" :key="index">
          <div class="camera-pic" ref="liveBox" :id="'liveId'+item.id">
            <i v-if="!item.startView" class="iconfont icon-bofang" @click="startLive(item, index)"></i>
            <!-- <i v-if="!item.startView" @click="startLive(item, index)" class="el-icon-caret-right"></i> -->
          </div>
          <span>{{item.location}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  let Player = require('../live/Player.js');

  import $ from 'jquery'

  export default {
    data() {
      return {
        idTemp: '',
        liveList: [
          {
            id: 1,
            location: '1机房门口处',
            deviceid: 'VV8S7KT',
            startView: false,
          },
          {
            id: 2,
            location: '大门口处',
            deviceid: 'VPBHM4K',
            startView: false,
          },
          {
            id: 3,
            location: '大门口处',
            deviceid: 'VPBIM5K',
            startView: false,
          },
          {
            id: 4,
            location: '大门口处',
            deviceid: 'VPBIM5K', //VPBIM7K VPBHM6K
            startView: false,
          },
        ],
        strhost: "ws://120.27.21.149:9066",  //120.27.21.149:9066  ws://120.27.21.149:9066
        webSock: null,
        player: null,
      }
    },
    methods: {
      startLive(item, index) {
        // this.loading = true
        this.liveList[index].startView = true;
        let para = {
          liveBoxId: '',
          player: '',
          webSock: '',
          deviceid: '',
          PlayerObj: ''
        }
        console.log('deviceInfo', this.deviceInfo);
        let playerObj = new Player({
          size: {
            width: 300,
            height: 300
          }
        })
        let player = null;
        let webSock = null;
        console.log(this.$refs.liveBox[index]);
        para = {
          liveBoxId: this.$refs.liveBox[index],
          player: player,
          webSock: webSock,
          deviceid: item.deviceid,
          PlayerObj: playerObj
        }
        this.initWebSocket(para)
      },
      goLive(deviceid, webSock) {
        var para = {
          type: 4,
          info: {
            deviceid: deviceid
          }
        }
        webSock.send(JSON.stringify(para))
        console.log('开始直播para:', para);
      },
      // 初始化WebSocket Player Player.canvas
      initWebSocket(para) {
        let {liveBoxId, player, webSock, deviceid, PlayerObj} = Object.assign({}, para)
        console.log('初始化WebSocket::para', para);
        let _this = this
        console.log('初始化WebSocket')
        var live = liveBoxId
        player = PlayerObj
        console.log('player=>', player)
        live.appendChild(player.canvas)
        webSock = new WebSocket(this.strhost)
        this.webSock = webSock
        webSock.binaryType = 'arraybuffer'
        webSock.onopen = function (evt) {
          _this.onOpen(evt)
          _this.goLive(deviceid, webSock)
        }
        webSock.onclose = function (evt) {
          _this.onClose(evt)
        }
        webSock.onmessage = function (evt) {
          // console.log('evt>>>>', evt)
          // console.log('here is the onmessage evt',evt)
          _this.onMessage(evt, player)
        }
        webSock.onerror = function (evt) {
          _this.onError(evt)
        }
        console.log('webSock>>>', webSock)
      },
      onOpen(evt) {
        console.log('connection')
      },
      onClose(evt) {
        // this.$Message.info('摄像头已关闭');
        console.log('this.websock.onclose()回调>>>close')
      },
      onMessage(evt, playerTemp) {
        var messageData = new Uint8Array(evt.data)
        // 判断webSocket是否有视频流返回
        if (messageData.length) {
          // console.log('true has data')
          // this.canCs=true;
        } else {
          // this.$message.error('摄像头不在线');
          console.log('false no data')
          // this.canCs=false;
        }
        // console.log(playerTemp);
        playerTemp.decode(messageData)
      },
      onError(evt) {
        alert('error');
      },
    },
    mounted() {

    },
    destroyed() {
      // 页面退出 关闭webSocket连接 关闭后会执行onclose()回调方法
      this.webSock.close()
    },
  }
</script>

<style scoped lang='scss'>
  .live-page {
    display: flex;
    // justify-content: space-around;
    flex-wrap: wrap;
    // align-items: center;
    width: 328px;
    height: 238px;
    border: 28px solid;
    border-top: 5px solid;
    // border-right: 28px solid;
    // border-bottom: 20px solid;
    border-left: 5px solid;
    background: transparent;
    border-image: url('../assets/images/33.png') 28 fill repeat;

    .title {
      width: 100%;
      height: 16px;
      margin-bottom:10px;

      span {
        font-size: 16px;
        color: #fff;
        // font-weight: 700;
      }
    }

    .live-item {
      width: 100%;
      height: 170px;
      // flex:1;
      overflow: hidden;
      // min-width: 0;

      .fix-flex {
        display: flex;
        width: 100%;
        height: 100%;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;

        .live-box {
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: center;
          width: 138px;
          margin-bottom: 25px;
          height: 60px;
          background: transparent;

          span {
            // width: 100%;
            font-size: 12px;
            color: #4eb6c3;
            font-weight: 600;
            line-height: 18px;
            margin-bottom: -24px;
          }

          .camera-pic {
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            width: 142px;
            height: 66px;
            overflow: hidden;
            background: rgba(0, 0, 0, .4);

            .iconfont{
              font-size: 30px;
              color:#0a5c81;
            }
          }
          .camera-pic canvas {
            width: 142px !important;
            height: 66px !important;
          }

        }
      }

    }
    .el-icon-caret-right {
      color: white;
      font-size: 20px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
</style>
